<template>
  <div class="default">
    <div class="titck-item border-bottom" v-for="item of ticketList" :key="item.id">
      <div class="ticket-main">
        <div>
          <h6 class="ticket-title">{{item.name}}</h6>
          <span class="desc">
            <img class="ticket-tagicon" src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png">
            23:59前可订明日
          </span>
        </div>
      </div>
      <div class="pice">
        <div class="price">
           <em>¥ {{item.Price}}</em>
        </div>
        <div class="pice-button">
          <button>预定</button>
        </div>
      </div>
      <div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailGallery',
  props: {
    ticketList: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .default
    display block
    .titck-item
      background #f5f5f5
      padding 0.2rem
      height 1.5rem
      .ticket-main
        float left
        width 4.4rem
        .ticket-title
          padding 0
          color #616161
          font-size .28rem
          line-height .4rem
          width 4.4rem
        .desc
          display inline-block
          height .32rem
          color #616161
          font-size .24rem
          line-height .32rem
          white-space nowrap
          .ticket-tagicon
            display inline-block
            width .2rem
            max-height .32rem
            margin-right .04rem
            vertical-align 0
  .pice
    float right
    text-align center
    .price
      em
        color #ff9800
        font-size 0.4rem
    .pice-button
      button
        width 1.8rem
        height 0.6rem
        background-image: linear-gradient(130deg,#ffab1e 37%,#ff8c12 100%)
        color white
        border-radius 0.05rem
</style>
